import { defineComponent, watch, shallowReactive, ref } from 'vue'
import * as echarts from 'echarts'
// 声明类型
const PropsType = {
  data: {
    type: Object,
    default: () => ({
      date:[],
			count:[],
    }),
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,

  setup(props) {
    // 定义 ref
    const chartRef = ref()

    // 配置项
    let options = {}

    watch(
      () => props.data,
      (val: any) => {
        //

        options = {
          grid: {
            left: '0%',
            right: '0%',
            top: '10%',
            bottom: '0%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
              lineStyle: {
                color: 'rgba(50, 216, 205, 1)'
              },
            }
          },
          xAxis: [{
            type: 'category',
            boundaryGap: 1,
            axisLine: {
              show: false
            },
            axisLabel: {
              color: '#A1A7B3'
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },

            data: val.date
          }],
          yAxis: [{
            type: 'value',
            name: '',
            padding: 5,
            splitNumber: 4,
            // max: 1000,
            splitLine: {
              show: true,
              lineStyle: {
                color: '#A1A7B3',
                type: 'dashed'
              }
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              margin: 10,
              textStyle: {
                color: '#A1A7B3'

              }
            },
            axisTick: {
              show: false
            }
          },

          ],
          series: [
            {
              name: '',
              type: 'line',
              smooth: true,
              stack: '总量',
              symbolSize: 5,
              showSymbol: false,
              itemStyle: {
                normal: {
                  color: '#23D0C4',
                  lineStyle: {
                    color: "#23D0C4",
                    width: 2
                  },
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: 'rgba(50, 216, 205, 1)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(255, 255, 255, 0.2)'
                    }
                  ], false),
                }
              },
              data: val.count
            },

          ]
        }
        // 手动触发更新
        if (chartRef.value) {
          // 通过初始化参数打入数据
          chartRef.value.initChart(options,true)
        }
      },
      {
        immediate: true,
        deep: true
      }
    )

    return () => {
      const height = "160px"
      const width = "448px"

      return <div>
        <echart ref={chartRef} class="mr-auto" options={options} height={height} width={width} />
      </div>
    }
  }
})

